<template>
  <div class="container">
    <div class="top-title">
      <h3>评价详情</h3>
      <p><span>快乐分享你的完美购物体验</span></p>
    </div>
    <div class="evaluate-page" v-for="item in evaluateInfo" :key="item.id">
      <div class="order-info">
        <div class="order-item">
          <img :src="item.picture" alt="" @click="$router.push(`/product/${item.id}`)">
          <p class="name ellipsis-2">{{item.name}}</p>
          <p class="price">&yen;{{item.payPrice}}</p>
          <p class="desc ellipsis-2">{{item.attrsText}}数量：x{{item.count}}</p>
        </div>
      </div>
      <div class="publish">
        <dl class="form-item">
          <dt>商品评分：</dt>
          <dd>
            <EvaluateDetailScore :evaluateScore="item.score" v-if="item.score"></EvaluateDetailScore>
            <span v-else>暂无评分</span>
          </dd>
        </dl>
        <dl class="form-item">
          <dt>印象标签：</dt>
          <dd>
            <EvaluateDetailTags :evaluateTags="item.tags" v-if="item.tags"></EvaluateDetailTags>
            <span v-else>暂无印象标签</span>
          </dd>
        </dl>
        <dl class="form-item">
          <dt>填写评价：</dt>
          <dd>
            <EvaluateDetailText :evaluateContent="item.content" v-if="item.content"></EvaluateDetailText>
            <span v-else>未获得评价</span>
          </dd>
        </dl>
        <dl class="form-item">
          <dt>评价晒单：</dt>
          <dd>
            <EvaluateDetailImg :images="item.pictures" v-if="item.pictures"></EvaluateDetailImg>
            <span v-else>无晒单</span>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import EvaluateDetailScore from './components/evaluate-detail-score.vue'
import EvaluateDetailTags from './components/evaluate-detail-tags.vue'
import EvaluateDetailText from './components/evaluate-detail-text.vue'
import EvaluateDetailImg from './components/evaluate-detail-img.vue'
import { useRoute } from 'vue-router'
import { findEvaluateInfo } from '@/api/evaluate'
export default {
  name: 'EvaluateDetail',
  components: {
    EvaluateDetailScore,
    EvaluateDetailTags,
    EvaluateDetailText,
    EvaluateDetailImg
  },
  setup () {
    const evaluateInfo = ref(null)
    const route = useRoute()
    const orderId = route.params.id
    findEvaluateInfo(route.params.id).then(data => {
      evaluateInfo.value = data.result
    })
    return { evaluateInfo, orderId }
  }
}
</script>

<style lang="less" scoped>
.container {
  .top-title {
    padding: 20px 0;
    text-align: center;
    h3 {
      font-size: 18px;
    }
    p {
      padding: 5px 0;
      span {
        color: #999;
        margin-left: 20px;
      }
    }
  }
  .evaluate-page {
    height: 100%;
    background: #fff;
    display: flex;
    margin-bottom: 1px;
    .order-info {
      padding: 30px 50px;
      border-right: 1px solid #f5f5f5;
      .order-item {
        margin-bottom: 0;
        margin-right: 0;
        width: 216px;
        margin-right: 10px;
        // margin-bottom: 20px;
        padding: 0 0 30px 0;
        text-align: center;
        cursor: pointer;
        img {
          width: 150px;
          height: 150px;
        }
        .name {
          font-size: 16px;
          text-align: center;
          color: #5c5c5c;
          margin: 10px 0;
        }
        .price {
          font-size: 18px;
          color: #cf4444;
          padding: 10px 0;
        }
        .count {
          color: #999;
          padding-bottom: 10px;
        }
      }
      .order-dsc {
        border-top: 1px solid #f5f5f5;
        padding-top: 24px;
        line-height: 32px;
        p {
          span {
            color: #999;
          }
        }
      }
    }
    .publish {
      padding: 40px 20px;
      .form-item {
        display: flex;
        padding-bottom: 32px;
        line-height: 20px;
        dt {
          color: #999;
          width: 100px;
          text-align: right;
        }
        dd {
          flex: 1;
          padding-left: 10px;
          padding-right: 50px;
        }
      }
    }
  }
}
</style>
